<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>云API</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css"/>
    <link rel="stylesheet" type="text/css" href="../css/style.css"/>
    <style>
        body{

        }
        .title{
        	text-align: center;
        	line-height: 50px;
        	font-size: 20px;
        }
        .btn{
        	width: 300px;
        	display: block;
        	position: relative;
        	margin: 0 auto;
        	height: 40px;
        	background-color: #999;
        	border-radius: 5px;
        }
        .showbox{
        	width: 200px;
        	height: 200px;
        	background-color: #DDDDDD;
        	margin: 20px auto;
        }
        .showbox img{
        	width: 100%;
        	height: 100%;
        }
        .jindu{
        	text-align: center;
        	padding:50px 20px ;

        }
    </style>
</head>
<body>
   <p class="title">真的是有毛病啊</p>
    <div class="showbox">
    	 <img src="../image/defult.jpg" alt="" />
    </div>
   <p class="jindu">上传进度<span id="jindu">0</span>%</p>
    <button class="btn" tapmode onclick="upimg()" >选择图片</button>
    <script src="../script/api.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
    	function upimg () {
    		api.getPicture({
			    sourceType: 'library',
			    encodingType: 'jpg',
			    mediaValue: 'pic',
			    destinationType: 'url',
			    allowEdit: true,
			    quality: 100,
			    targetWidth: 400,
			    targetHeight: 400,
			    saveToPhotoAlbum: false
			}, function(ret, err) {
			    if (ret) {
			        console.log(JSON.stringify(ret));
//					请使用自己的token 下面的token作为演示已过期
			        var qiniu_token = "EZ-Zp7H1vlmgu9QeJY_D1gWGU7UFeHlsvUgyfWMg:si8dNo4y_jcKHvmMVrG3SjCaZ2c=:eyJzY29wZSI6InN1b3N1byIsImRlYWRsaW5lIjoxNTA3NjE3MzE3fQ==";
			        var savename =  Date.parse(new Date())/1000;
			        var filename = 'widget://image/defult.jpg';
			        var param = {
			    		file : ret.data,
			    		key : savename+'.jpg',
			    		token : qiniu_token,
			    	};
			    	var suo = api.require('qn');
			    	suo.start(param,function (ret,err){
			    	if(ret){
			    		if(ret.status){
			    			$api.attr($api.dom(".showbox img"),'src','http://img.isuoge.com/'+ret.data.key);
			    			alert("上传成功："+JSON.stringify(ret));

			    		}
						console.log("上传zhong："+JSON.stringify(ret));
			    		if(ret.progress){
			    			var prog = $api.dom("#jindu");
			    			console.log("进度："+JSON.stringify(ret));
						 	$api.text(prog,ret.progress*100);
			    			api.toast({
							    msg: "上传进度："+ret.progress,
							    duration: 2000,
							    location: 'bottom'
							});

			    		}
			    	}else{
			    		console.log("上传错误："+JSON.stringify(err));
			    	}

			    	});
			    } else {
			        alert(JSON.stringify(err));
			    }
			});
    	}
    </script>
</body>
</html>
